<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定义项目在交叉轴上如何对齐</title>
	<style type="text/css">
			.content {
				display: flex;
				background-color: #00FFFF;
				align-items:center;
				height: 400px;
			/* 
			flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
 */
			}
			.item{
				
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="item">
				子元素1
			</div>
			<div class="item">
				子元素1
			</div>
			<div class="item">
				子元素1
			</div>
		</div>
	</body>
</html>
